<template>
	<!-- 外层容器 -->
	<view class="_focus-body-shell-class" :style="styleBody">
		
		<!-- 普通滚动容器 -->
		<scroll-view scroll-y="true" >
			<view></view>
		</scroll-view>
		
		
		<!-- list组件 -->
		<list></list>
		
		
		<!-- 子级插槽 -->
		<!-- <slot></slot> -->
		
	</view>
</template>


<script>
	/**
	 * 滚动容器
	 * @description vue/nvue通用，用于区域滚动。
	 * @tutorial
	 * @property {String} tag 组件自定义标识，默认：focus-scroll
	 * @property {String} mode = [scroll|list] 滚动容器组件模式，默认：scroll
	 *   @value scroll 普通scroll容器，性能一般(默认)
	 *   @value list 内存优化长列表，仅在nvue时有效
	 * @property {String} direction = [row|col] 容器滚动方向，默认：col
	 *   @value row 横向
	 *   @value col 竖向
	 * @property {String,Number} width 组件宽度(rpx)
	 * @property {String,Number} height 组件高度(rpx)
	 */
	
	export default {
		name: "focus-scroll",
		// 传递数据
		props: {
			"tag": { type: String, default: 'focus-body' },
			"mode": { type: String, default: 'auto' },
		},
		
		// 页面数据
		data() {
			return {
				// 状态信息
				state: {
					isNvue: false, // 是否是weex编译文件
					isAndroid: false, // 是否是安卓平台
				},
				// 系统信息
				windowHeight: 0, // 可使用窗口高度(px)
			}
		},
		
		// 实例创建完成
		created() {
			// #ifdef APP-NVUE
			// nvue页面标识
			this.state.isNvue = true;
			// 锁定屏幕方向为竖向
			plus.screen.lockOrientation('portrait-primary');
			// #endif
		},
		
		// 实例挂载完毕
		mounted() {
			// 获取平台信息
			uni.getSystemInfo({
				success: (sysD) => {
					// 判断是否为安卓平台
					this.state.isAndroid = sysD.platform=='ios' ? false : true;
					// 系统信息 赋值
					this.windowHeight = sysD.windowHeight;
				}
			});
		},
		
		// 计算属性
		computed: {
			// 容器style属性
			styleBody() {
				// 初始化
				var obj_style = {};
				
				// ====================================== 屏幕宽高
				// 可使用窗口高度
				if (Number(this.windowHeight) > 0)
				{
					// 容器高度变化模式 = fix，设定高度height值
					if (this.mode == 'fix') { obj_style['height'] = this.windowHeight + 'px'; }
					// 容器高度变化模式 = auto，设定最小高度min-height值
					else {
						// nvue模式下
						if (this.state.isNvue) { obj_style['min-height'] = this.windowHeight + 'px'; }
						// vue模式下
						else { obj_style['min-height'] = this.windowHeight + 'px'; }
					}
				}
				
				// 结果返回
				return obj_style;
			}
		},
		
	}
</script>


<style lang="scss">
	// 外层容器
	._focus-body-shell-class{
		width: 750rpx;
		background-color: $focus-color-background;
		/* #ifndef APP-NVUE */
		display: flex; box-sizing: border-box;
		/* #endif */
		flex-direction: column; justify-content: flex-start; align-items: stretch;
	}
</style>